@charset "utf-8";
@import url('./style.roll20.css');
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
@font-face {
	font-family:'HeirofLightBold';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/HeirofLightBold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	unicode-range:U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+0041-005A, U+0061-007A, U+0030-0039, U+AC00-D7A3;
}
@font-face {
	font-family:'SUIT-Medium';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}



/********************************
	Common
********************************/

button {background:none; border:none; font-size:1em;}
.loading {display:none; position:fixed; z-index:99999; top:0; left:0; right:0; bottom:0; text-align:center; background:rgba(5, 16, 12, 0.5); backdrop-filter:blur(2px);}
.loading.mask {display:block;}
.loading > div {display:block; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.loading p {font-size:15px; font-weight:600; color:#fff;}
.lds-roller {display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-roller div {animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px;}
.lds-roller div:after {content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin: -4px 0 0 -4px;}
.lds-roller div:nth-child(1) {animation-delay: -0.036s;}
.lds-roller div:nth-child(1):after {top: 63px; left: 63px;}
.lds-roller div:nth-child(2) {animation-delay: -0.072s;}
.lds-roller div:nth-child(2):after {top: 68px; left: 56px;}
.lds-roller div:nth-child(3) {animation-delay: -0.108s;}
.lds-roller div:nth-child(3):after {top: 71px; left: 48px;}
.lds-roller div:nth-child(4) {animation-delay: -0.144s;}
.lds-roller div:nth-child(4):after {top: 72px; left: 40px;}
.lds-roller div:nth-child(5) {animation-delay: -0.18s;}
.lds-roller div:nth-child(5):after {top: 71px; left: 32px;}
.lds-roller div:nth-child(6) {animation-delay: -0.216s;}
.lds-roller div:nth-child(6):after {top: 68px; left: 24px;}
.lds-roller div:nth-child(7) {animation-delay: -0.252s;}
.lds-roller div:nth-child(7):after {top: 63px; left: 17px;}
.lds-roller div:nth-child(8) {animation-delay: -0.288s;}
.lds-roller div:nth-child(8):after {top: 56px; left: 12px;}
@keyframes lds-roller {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

.point-color {color:var(--color-point) !important;}
.point-bak-color {background-color:var(--color-point) !important;}


/********************************
	Write
********************************/

.btn_confirm {text-align:center; padding:40px 0;}
.bo_w_flie {margin-top: 5px;}


/********************************
	List
********************************/

#bo_sch {text-align:center;}
#bo_cate {text-align:center;}
#bo_cate li {display:inline-block; vertical-align:middle; margin:0.2em;}
#bo_cate li a {border-radius:9em;}

.character-thumb-list {display:block; position:relative; text-align:center; padding:20px 0; overflow:hidden; max-width:1000px; margin:0 auto;}
.character-thumb-list li {display:inline-block; position:relative; max-width:47%; padding:5px; box-sizing:border-box;}
.character-thumb-list li button {display:block; position:relative; width:100%; z-index:0;}
.character-thumb-list .character-thumb {display:block; position:relative; width:100%; z-index:0; overflow:hidden;  background:rgba(0,0,0,.1); backdrop-filter:blur(2px); -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.1); box-shadow:0 0 10px 0 rgba(0,0,0,0.1); border-radius:3em 0 3em 0;}
.character-thumb-list .character-thumb .pad {position:relative; z-index:-1; opacity:0; transition:.3s all; -webkit-transition:.3s all;}
.character-thumb-list .character-thumb em {display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); background:no-repeat 50% 50%; background-size:cover;}
.character-thumb-list .character-thumb em.no-img {background-image:url(../img/no_data.png);}
.character-thumb-list button:hover .character-thumb .pad {opacity:1;}
.character-thumb-list button:hover .character-thumb  em {opacity:.6; transform:translate(-50%, -50%) scale(1.1); -webkit-transform:translate(-50%, -50%) scale(1.1);}
.character-thumb-list .name-box {display:block; padding:8px !important; margin-top:5px;}
.character-thumb-list .name-box > * {display:block; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:1.4em; line-height:1.4em;}
.character-thumb-list .name-box .info {display:block; opacity:.7;}
.character-thumb-list .name-box .subject {display:block; font-size:1.1em;}
.character-thumb-list .name-box .cate {display:block; position:relative; opacity:.7;}
.character-thumb-list .name-box .cate > span {display:inline-block; vertical-align:middle; line-height:1.2; padding-top:4px; font-weight:100;}
.character-thumb-list .name-box .cate > span + span:before {content:"|"; margin:0 .4em;}


@media all and (max-width:740px) {
	.character-thumb-list li button .cover {font-size:15px;}
}
@media all and (max-width:540px) {
	.character-thumb-list li button .cover{font-size:14px;}
}
@media all and (max-width:430px) {
	.character-thumb-list li button .cover {font-size:13px;}
}


/********************************
	Viewer
********************************/

#detail_viewer_wrap {position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:hidden; font-size:20px;}
.cha-viewer-wrap button {font-size:1em;}
.cha-viewer-wrap * {transition:none; -webkit-transition:none;}
.cha-viewer-wrap .goto-list {position:absolute; top:.5em; left:.5em; z-index:999; width:2em; height:2em; font-size:1em;}

@media all and (max-width:1024px) { #detail_viewer_wrap {font-size:19px;}}
@media all and (max-width:780px) { #detail_viewer_wrap {font-size:18px;}}
@media all and (max-width:640px) { #detail_viewer_wrap {font-size:17px;}}
@media all and (max-width:480px) { #detail_viewer_wrap {font-size:16px;}}
@media all and (max-width:380px) { #detail_viewer_wrap {font-size:15px;}}


/* 전신 출력 : 기본 벼경 */
.cha-body {display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; transition:.3s all; -webkit-transition:.3s all;}
.cha-body .img {display:block; position:absolute; top:2em; bottom:0; width:1200px; left:50%; margin-left:-600px; background:no-repeat 50% 50%; background-size:contain; z-index:-1; transition:.3s all; -webkit-transition:.3s all;}
.cha-body .bak {display:block; position:absolute; top:0; bottom:0; width:2000px; left:50%; margin-left:-1000px; background:no-repeat 50% 50% rgba(0,0,0,.8); backdrop-filter:blur(4px); background-size:contain; z-index:-2;}

/* 프로필 항목 메뉴 */
.cha-nav-box {display:block; position:absolute; left:50%; right:0; bottom:0; width:2000px; margin-left:-1000px; padding:3.5em 1em 2em; text-align:center; z-index:1; box-sizing:border-box;}
.cha-nav-box:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; 
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 100%);
	z-index:-1;
}
.cha-nav-box > * {display:block; position:relative; font-size:1em; text-shadow: 0px 0px 10px rgba(0, 0, 0, .7); line-height:1.5;}
.cha-nav-box > span {font-size:1em; color:#fff; font-weight:800; font-family:'HeirofLightBold', 'Ma Shan Zheng';}
.cha-nav-box > strong {font-size:1.8em; color:#fff; font-weight:800; padding:10px 0; letter-spacing:.05em; font-family:'HeirofLightBold', 'Ma Shan Zheng';}
.cha-nav-box .modify {display:inline-block; vertical-align:middle; width:1.12em; height:.945em; max-width:40px; max-height:34px; background:url(../img/btn_modify.png) no-repeat 50% 50%; background-size:contain;}
.cha-nav-box .nav {padding:.5em 0; color:#b4b6b7;}
.cha-nav-box .nav * {text-shadow:none;}
.cha-nav-box .nav button {font-size:1em; color:#b4b6b7; vertical-align:middle; font-family:'SUIT-Medium';}
.cha-nav-box .nav button:hover {color:var(--color-point) !important;}
.cha-nav-box .nav i {display:inline-block; vertical-align:middle; padding:0 .2em; opacity:.6;}
.cha-nav-box .nav i:before {content:"◆"; font-size:.6em;}

/* 전신 목록 */
.char-body-list {display:block; position:absolute; left:120px; top:0; bottom:0; width:60px; padding:5px; z-index:10;}
.char-body-list > div {display:table; width:100%; height:100%; table-layout:fixed;}
.char-body-list > div > div {display:table-cell; vertical-align:middle;}
.char-body-list .item {display:block; position:relative; margin:10px 0; padding:10px 10px 10px 0;}
.char-body-list .item .thumb {display:block; position:relative; transform:rotate(45deg); -webkit-transform:rotate(45deg); overflow:hidden; width:45px; height:45px; background:rgba(0,0,0,.5); border:1px solid #fff; margin:0 auto; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);}
.char-body-list .item .thumb em {display:block; position:absolute; top:0; left:0; right:0; bottom:0; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.char-body-list .item .thumb img {display:block; position:absolute; max-width:4000%; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.char-body-list .item .add {background:rgba(0,0,0,.1);}
.char-body-list .item .add span {display:block; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.char-body-list .item .control {display:block; position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); left:100%; margin-left:-20px; visibility:hidden; opacity:0; transition:.3s all; -webkit-transition:.3s all;}
.char-body-list .item .control button {border-radius:9em; height:25px; padding:0; width:4em; font-size:12px;}
.char-body-list .item .control button + button {margin-top:4px;}
.char-body-list .item .control button.del {background:#850101 !important; border-color:#850101 !important; color:#fff !important;}
.char-body-list .item .body-add-form {display:block; position:absolute; width:15em; font-size:12px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); left:100%; margin-left:-20px; visibility:hidden; opacity:0; transition:.3s all; -webkit-transition:.3s all;}
.char-body-list .item .body-add-form input[type="radio"] {display:none;}
.char-body-list .item .body-add-form label {display:block; float:left; width:50%; text-align:center; opacity:.6; height:30px; line-height:30px;}
.char-body-list .item .body-add-form input[type="radio"]:checked + label {font-weight:800; opacity:1;}
.char-body-list .item .body-add-form input#add_new_body_type1:checked ~ * input[type="file"] {display:none;}
.char-body-list .item .body-add-form input#add_new_body_type2:checked ~ * input[type="text"] {display:none;}
.char-body-list .item .body-add-form button {border-radius:0 !important; height:30px; padding:0; width:100%;}
.char-body-list .item .body-add-form .input-box {clear:both; border-top:1px solid rgba(255,255,255,.5); padding-top:10px;}
.char-body-list .item .body-add-form .input-box > * {height:25px !important;}
.char-body-list .item .body-add-form.open {opacity:1; visibility:visible; margin-left:10px;}
.char-body-list .item:hover .control {opacity:1; visibility:visible; margin-left:0px;}

/* 걍략/기관 목록 */
.char-category {position:absolute; top:0; left:0; right:0; z-index:1; transition:.3s all; -webkit-transition:.3s all;}
.char-category > * {display:block; position:relative; float:left; width:50%; text-align:center; font-size:1em;}
.char-category .item {display:block; position:relative; text-align:center; color:#eee; font-size:1em; font-weight:600; padding:1.5em 0 1.9em; line-height:1.3; font-family:'HeirofLightBold', 'Ma Shan Zheng'; background:url(../img/acc_category.png) no-repeat 50% 100%; background-size:auto 2em;}

/* 계제/공/방/근 정보 */
.char-grade-info {display:block; position:absolute; top:0; bottom:0; right:.5em; width:5.7em; text-align:center;}
.char-grade-info > div {display:table; width:100%; height:100%; table-layout:fixed;}
.char-grade-info > div > div {display:table-cell; vertical-align:middle;}

.char-grade-info .grade {display:table; position:relative; width:5.7em; height:5.35em; background:url(../img/bak_grade.png) no-repeat 50% 50%; background-size:contain; margin-bottom:1em;}
.char-grade-info .grade strong {display:table-cell; vertical-align:middle; text-align:center; font-size:2.5em; font-family:'HeirofLightBold', 'Ma Shan Zheng'; font-weight:800; color:#fff; text-shadow: 0px 0px .2em rgba(0, 0, 0, .5);}
.char-grade-info .row {display:block; position:relative; line-height:1.6em;}
.char-grade-info .row + .row {margin-top:0;}
.char-grade-info .row + .row:before {content:""; display:block; position:absolute; width:2em; height:2px; background:#fff; top:0; left:50%; margin-left:-1em; transform:rotate(45deg); -webkit-transform:rotate(45deg);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
.char-grade-info .row strong {display:block; position:relative; padding-right:50%; text-align:right; font-family:'HeirofLightBold', 'Ma Shan Zheng'; font-weight:800; color:#fff; text-shadow: 0px 0px .3em rgba(0, 0, 0, .7);}
.char-grade-info .row strong + strong {padding-right:0; padding-left:50%; text-align:left;}
.char-grade-info .row strong span {display:block; padding-right:.3em;}
.char-grade-info .row strong + strong span {padding-left:.3em; padding-right:0;}



/********************************
	Default : Pannel
********************************/

.cha-pannel {display:block; position:absolute; top:0; bottom:0; right:0; width:500px; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:999; visibility:hidden; color:#b4b6b7;}
.cha-pannel {transform:translateX(100%); -webkit-transform:translateX(100%); transition:.3s all; -webkit-transition:.3s all;}
.cha-pannel.active {visibility:visible; transform:translateX(0); -webkit-transform:translateX(0); -webkit-box-shadow: 0px 0px 1em 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 1em 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 1em 0px rgba(0,0,0,0.3);}
.cha-pannel.sub-active {transform:translateX(-100%); -webkit-transform:translateX(-100%);}
.cha-pannel.sub-active .btn-pannel-close {display:none;}
.cha-pannel .btn-pannel-close {position:absolute; z-index:1; top:.5em; right:.5em; width:2em; height:2em; font-size:1em;}
.cha-pannel > .scroll-inner,
.cha-pannel > .scroll-default-inner {display:block; position:relative; height:100%; overflow:auto; padding:2.5em 2.25em; z-index:0; box-sizing:border-box;}
.cha-pannel > .scroll-inner .nicescroll-rails,
.cha-pannel > .scroll-inner .nicescroll-rails * {transition:none; -webkit-transition:none;}

.cha-pannel[data-content="로그"] {background:#262626;}


.cha-pannel .line {display:block; position:relative; clear:both; background:url(../img/img_line.png) no-repeat 50% 50%; background-size:contain; height:1.15em; margin:1em 0;}

.open-pannel .char-category,
.open-pannel .char-grade-info {opacity:0;}

.duble-open-pannel .char-category,
.duble-open-pannel .char-grade-info,
.duble-open-pannel .char-body-list,
.duble-open-pannel .cha-nav-box {opacity:0;}
.duble-open-pannel .cha-body {transform:translateX(-20%); -webkit-transform:translateX(-20%);}

.cha-pannel .txt-prof {font-size:20px; font-weight:800; margin-bottom:.7em; text-align:center;}
.cha-pannel .txt-prof > span {display:inline-block; vertical-align:top; margin-right:.3em; line-height:1.5;}
.cha-pannel .txt-prof > span:before {content:"#"; font-style:italic;}

.cha-pannel dl {display:block; position:relative; color:#b4b6b7; clear:both; margin:30px 0;}
.cha-pannel dl > * {display:block; position:relative; font-size:16px; box-sizing:border-box;}
.cha-pannel dt {padding-left:2em; background:url(../img/ico_bullet.png) no-repeat 0 .08em; background-size:1.625em auto; font-weight:800; margin-bottom:1em;}
.cha-pannel dd,
.cha-pannel .tbl-subtxt {font-size:14px; margin-left:2.45em; line-height:1.5; color:#b4b6b7;}

.cha-pannel .item-title {line-height:1.5em; font-size:17px; padding-left:2em; background:url(../img/ico_bullet.png) no-repeat 0 .2em; background-size:1.625em auto; font-weight:800; margin-bottom:1em;}
.cha-pannel .item-title .s-write {margin-left:1em; opacity:.5; transition:.3s all; -webkit-transition:.3s all;}
.cha-pannel .item-title .s-write:hover {opacity:1;}

@media all and (max-width:1570px) {
	.duble-open-pannel .cha-body {transform:translateX(-30%); -webkit-transform:translateX(-30%);}
}
@media all and (max-width:1400px) {
	.open-pannel .cha-body {transform:translateX(-20%); -webkit-transform:translateX(-20%);}
	.duble-open-pannel .cha-body {transform:translateX(-40%); -webkit-transform:translateX(-40%);}
}
@media all and (max-width:1190px) {
	.cha-pannel.sub-active {transform:translateX(-70%); -webkit-transform:translateX(-70%);}
}
@media all and (max-width:1024px) {
	.cha-pannel > .scroll-inner,
	.cha-pannel > .scroll-default-inner {padding:2em 1.85em 2em;}
	.duble-open-pannel .cha-body {transform:translateX(-20%); -webkit-transform:translateX(-20%);}
}
@media all and (min-width:641px) {
	.cha-pannel dl.half {float:left; clear:none;}
	.cha-pannel dl.half.w40 {width:40%;}
	.cha-pannel dl.half.w60 {width:60%;}

	.cha-pannel dl.tbl {display:table; table-layout:fixed; width:100%;}
	.cha-pannel dl.tbl > * {display:table-cell; vertical-align:top;}
	.cha-pannel dl.tbl dt {width:6.5em; margin-bottom:0;}
	.cha-pannel dl.tbl dt.wide {width:8em;}

	.cha-pannel .tbl-subtxt {line-height:1.5; padding-left:2em; margin:-1em 0 1em;}
}
@media all and (max-width:640px) {
	.cha-pannel dl.mo-tbl {display:table; table-layout:fixed; width:100%;}
	.cha-pannel dl.mo-tbl > * {display:table-cell; vertical-align:top;}
	.cha-pannel dl.mo-tbl dt {width:6.5em; margin-bottom:0;}
	.cha-pannel dl.mo-tbl dt.wide {width:8em;}

	.cha-pannel .tbl-subtxt {margin-left:0; margin-top:-.5em;}
	.cha-pannel .tbl-subtxt > div {margin-left:2.45em;}
}
@media all and (max-width:500px) {
	.cha-pannel {width:100%;}
}



/********************************
	장서 : Pannel
********************************/

.cha-prof-form {display:block; position:relative; overflow:hidden;}
.cha-prof-form > div {padding:3px 2px; float:left; box-sizing:border-box; overflow:hidden;}
.cha-prof-form > div > strong,
.cha-prof-form > div > span {display:block; float:left; height:30px;}
.cha-prof-form > div > strong {width:20%; font-size:12px; line-height:30px; padding:0 1em; box-sizing:border-box;}
.cha-prof-form > div > span {width:80%; height:auto; min-height:30px;}
.cha-prof-form textarea,
.cha-prof-form select,
.cha-prof-form input[type="text"],
.cha-prof-form input[type="file"] {display:block; width:100%;}
.cha-prof-form select,
.cha-prof-form input[type="text"],
.cha-prof-form input[type="file"] {border-radius:9em;}
.cha-prof-form textarea {border-radius:1em;}
.cha-prof-form p {font-size:12px; padding:5px 0; color:#b4b6b7;}
.cha-prof-form p:before {content:"◆ "; font-size:.5em;}
.cha-prof-form .ui-btn {font-size:12px; height:2.5em; border-radius:9em;}
.cha-prof-form .preview {font-size:11px;}
.cha-prof-form .preview:before {display:none;}
.cha-prof-form .preview .ui-btn {font-size:11px; border-radius:0; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; margin-top:5px; padding:0 5px;}
.cha-prof-form .preview span.ui-btn {cursor:default;}

#book_list li + li {padding-top:1em; margin-top:1em; border-top:2px dashed rgba(255,255,255,.2);}

.book-item {display:block; position:relative; padding:.5em 0; font-size:14px;}
.book-item .row {display:table; width:100%; table-layout:fixed; position:relative;}
.book-item .row > * {display:table-cell; vertical-align:top; padding:.5em 0;}
.book-item .row .book-subj {font-size:17px; font-weight:800;}
.book-item .row .side {width:4em; padding-left:.5em; text-align:right; white-space:nowrap;}
.book-item .row .side span {display:inline-block; border-radius:3px; padding:0 .5em; cursor:default; height:auto; font-size:12px; min-width:3em; text-align:center;}
.book-item .info > div {text-align:center;}
.book-item .info strong,
.book-item .info span {display:block; font-size:14px;}
.book-item .info strong {font-size:12px; opacity:.5; font-weight:800; padding-bottom:.2em;}
.book-item .effect {position:relative; font-size:14px; padding:1em 0; line-height:1.5;}
.book-item .ctrl {display:block; position:relative; padding:1em 0 0; border-top:1px solid rgba(0,0,0,.1); overflow:hidden;}
.book-item .ctrl .ui-btn {float:right; font-size:11px; height:2.5em; border-radius:9em;}
.book-item .info,
.book-item .effect {border-top:1px solid rgba(0,0,0,.1);}
.book-item .ctrl .ui-btn.mod {float:left;}
.book-item .ctrl .ui-btn.del {float:right;}
.book-item .original {display:block;}
.book-item .edit-box {display:none; padding-bottom:1em;}
.book-item.edit .original {display:none;}
.book-item.edit .edit-box {display:block;}



/********************************
	앵커 : Pannel
********************************/

#anker_list li + li {padding-top:1em; margin-top:1em; border-top:2px dashed rgba(255,255,255,.2);}

.anker-item {display:block; position:relative; padding:.5em 0; font-size:14px;}
.anker-item .row {display:table; width:100%; table-layout:fixed; position:relative;}
.anker-item .row > * {display:table-cell; vertical-align:top; padding:.5em 0;}
.anker-item .row .anker-subj {font-size:17px; font-weight:800;}
.anker-item .row .side {width:4em; padding-left:.5em; text-align:right; white-space:nowrap;}
.anker-item .row .side span {display:inline-block; border-radius:3px; padding:0 .5em; cursor:default; height:auto; font-size:12px; min-width:3em; text-align:center;}
.anker-item .row .side span i + i:before {content:" | ";}
.anker-item .effect {position:relative; font-size:14px; padding:1em 0; line-height:1.5;}
.anker-item .ctrl {display:block; position:relative; padding:1em 0 0; border-top:1px solid rgba(255,255,255,.1); overflow:hidden;}
.anker-item .ctrl .ui-btn {float:right; font-size:11px; height:2.5em; border-radius:9em;}
.anker-item .info,
.anker-item .effect {border-top:1px solid rgba(0,0,0,.1);}
.anker-item .ctrl .ui-btn.mod {float:left;}
.anker-item .ctrl .ui-btn.del {float:right;}
.anker-item .original {display:block;}
.anker-item .edit-box {display:none; padding-bottom:1em;}
.anker-item.edit .original {display:none;}
.anker-item.edit .edit-box {display:block;}



/********************************
	시나리오 : Pannel
********************************/

.story-area[data-mode=""] .mode-write {display:none;}
.story-area[data-mode=""] .mode-list {display:block;}

.story-area[data-mode="write"] .mode-write {display:block;}
.story-area[data-mode="write"] .mode-list {display:none;}

#story_list li + li {}

.story-item {display:block; position:relative;}
.story-item .ctrl {display:block; position:relative; padding:.5em 0 1em; border-top:1px solid rgba(255,255,255,.1); overflow:hidden;}
.story-item .ctrl .ui-btn {float:right; font-size:11px; height:2.5em; border-radius:9em;}
.story-item .ctrl .ui-btn.mod {float:left;}
.story-item .ctrl .ui-btn.del {float:right;}
.story-item .original {display:block;}
.story-item .edit-box {display:none; padding-bottom:1em;}
.story-item.edit .original {display:none;}
.story-item.edit .edit-box {display:block;}

.story-item-view {display:block; position:relative; width:100%; text-align:left; padding:10px 0 10px 85px; min-height:80px;}
.story-item-view .thumb {display:block; position:absolute; width:50px; height:50px; top:50%; margin-top:-25px; left:10px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); border:1px solid #fff; background:rgba(0,0,0,.5); -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); overflow:hidden;}
.story-item-view .thumb em {display:block; position:absolute; top:50%; left:50%; margin-top:-75%; margin-left:-75%; width:150%; height:150%; transform:rotate(45deg); -webkit-transform:rotate(45deg); background:no-repeat 50% 50%; background-size:auto 100%;}
.story-item-view .date {font-size:12px; color:#b4b6b7; opacity:.5;}
.story-item-view .subject {font-size:17px; color:#b4b6b7; font-weight:800; line-height:1.5; padding:5px 0; word-break:keep-all;}
.story-item-view .mem {display:inline-block; vertical-align:middle; opacity:.7; color:#b4b6b7; font-size:12px; padding-bottom:3px; margin-right:.5em;}
.story-item-view .infos {display:inline-block; vertical-align:middle;  margin-right:.5em; opacity:.7; color:#b4b6b7; font-size:12px; padding-bottom:3px;}
.story-item-view .infos span:before {content:" | "; opacity:.3;}


@media all and (max-width:450px) {
	.story-item-view .subject {font-size:15px;}
}


#log_content_viewer .log-title {font-size:20px; margin-bottom:1em;}
#log_content_viewer .log-title strong {font-weight:800; word-break:keep-all; line-height:1.5;}
#log_content_viewer .log-info {padding-bottom:1.5em;}
#log_content_viewer .log-info p {font-size:14px; color:#b4b6b7; opacity:.7; line-height:1.5;}
#log_content_viewer #chat_txt_log {border:1px solid #bbb; border-left-width:0; border-right-width:0; padding:0;}